body {
  /* \5b8b\4f53 指的是unicode编码中的宋体 */
  font: 12px/1.3 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53",
    sans-serif;
}

li,
ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

a {
  text-decoration: none;
}

.clear-both::after {
  content: "";
  display: block;
  clear: both;
}

.clear-border {
  border: 0 !important;
}

/* 顶部 */

#link-m {
  width: 100%;
  min-width: 1200px;
  height: 30px;
  /* border:1px solid green; */
  background-color: #eaeaea;
}

#link-m a {
  color: #333;
  text-decoration: none;
}

#link-m a:hover {
  color: #e1251b;
}

#link-m .link {
  margin: 0 auto;
  width: 1200px;
  /*  border:1px solid red; */
}

.link-title {
  float: left;
  height: 30px;
  line-height: 30px;
  /* border:1px solid blue; */
}

.link-title strong {
  font-weight: normal;
}

.link-title a {
  padding-right: 5px;
  padding-left: 5px;
  border-right: 1px solid #b3aeae;
}

.link ul {
  float: right;
  margin: 0px;
  padding: 0;
  list-style-type: none;
}

.link ul li {
  float: left;
  height: 30px;
  line-height: 30px;
  /* border:1px solid blue; */
}

.link ul li a {
  padding-right: 10px;
  padding-left: 10px;
  border-right: 1px solid #b3aeae;
}

/* 顶部结束 */

/* logo部分*/

#banner {
  margin: 0 auto;
  width: 1200px;
  height: 110px;
  /* border:1px solid red; */
}

#banner .banner-logo {
  float: left;
  width: 250px;
  height: 110px;
  line-height: 110px;
  /* border:1px solid green; */
  font-size: 0;
  text-align: center;
}

#banner .banner-logo a {
  display: inline-block;
}

#banner .banner-logo img {
  vertical-align: middle;
}

#banner form {
  float: right;
  height: 110px;
  line-height: 110px;
  /* border:1px solid yellow; */
  font-size: 0;
}

#banner form input {
  box-sizing: border-box;
  width: 490px;
  height: 32px;
  /* padding:2px; */
  border: 2px solid #ea4a36;
  border-right: 0;
  /* 去掉input的轮廓 */
  outline: none;
  vertical-align: middle;
  font-size: 12px;
}

#banner form button {
  width: 68px;
  height: 32px;
  background-color: #ea4a36;
  border: none;
  outline: none;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
  cursor: pointer;
}

/* logo部分结束*/

/*菜单开始*/

#nav {
  width: 100%;
  min-width: 1200px;
  height: 46px;
  border-bottom: 2px solid #e1251b;
  /* border:1px solid green; */
}

#nav ul {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  width: 1200px;
  height: 100%;
  line-height: 46px;
  /* border:1px solid green; */
}

#nav ul li {
  float: left;
  /* border:1px solid blue; */
  padding-left: 22px;
  padding-right: 22px;
  font-size: 16px;
}

#nav ul li a {
  color: #333;
  text-decoration: none;
}

#nav ul li a:hover {
  color: #e1251b;
}

#nav .fl {
  width: 210px;
  padding: 0;
  background-color: #e1251b;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.pagecontent {
  width: 100%;

  min-width: 1200px;
}

.pagecontent .content {
  position: relative;
  width: 1200px;
  height: 460px;
  margin: 0 auto;
}

.menu {
  z-index: 2;
  /* margin-left: 40px; */
  position: absolute;
  width: 210px;
}

.menu ul {
  margin: 0;
  padding: 0;
  padding-top: 6px;
  background-color: white;
  list-style-type: none;
}

.menu ul li {
  height: 30px;
  line-height: 30px;
}

.menu ul li > a {
  display: block;
  color: #333;
  text-decoration: none;
  padding-left: 20px;
  font-size: 14px;
}

.menu a:hover {
  color: tomato;
  cursor: pointer;
}

.menu .menu-content {
  z-index: 2;
  display: none;
  position: absolute;
  width: 730px;
  top: 0px;
  bottom: 0;
  left: 210px;
  background-color: rgb(250, 250, 250);
}

.menu ul li:hover .menu-content {
  display: block;
}

.menu-content dt,
.menu-content dd {
  margin: 0;
  padding: 0;
  float: left;
  height: 14px;
  line-height: 14px;
  /* margin: 5px; */
}

.menu-content dt,
.menu-content dd {
  padding: 0px 10px;
  margin-top: 15px;
  border-right: 1px solid #666;
}

.menu-content dt {
  width: 50px;
  text-align: right;
}

.menu-content dt a {
  font-weight: bold;
}

.menu-content dl {
  margin: 0;
  padding: 0;
  display: block;
  clear: both;
}

.menu-content dl a {
  text-decoration: none;
  color: #666;
}

.menu-content dl a:hover {
  color: #333;
}

.banner {
  z-index: 1;
  position: absolute;
  left: 210px;
  top: 2px;
  /* border: 1px solid green; */
  width: 730px;
  height: 454px;
  overflow: hidden;
}

.banner > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 2920px;
  position: absolute;
  left: 0px;
  transition: left 2s;
  /* animation-name: b1; */
  /* animation-duration: 3.5s; */
  /* animation-iteration-count: infinite; */
}

.banner > ul.b1 {
  left: -730px;
  /* animation-name: b1; */
}

.banner > ul.b2 {
  left: -1460px;
  /* animation-name: b2; */
}

.banner > ul.b3 {
  left: -2190px;
  /* animation-name: b3; */
}

.banner > .control > ul::after {
  content: "";
  display: block;
  clear: both;
}

.banner > .control > ul {
  position: absolute;
  width: 100px;
  left: 50%;
  bottom: 20px;
  margin-left: -50px;
  z-index: 2;
}

.banner > .control > ul > li {
  border-radius: 50%;
  float: left;
  margin: 0 5px;
  border: 5px solid #333;
}

.banner > .control > ul > li.active {
  border: 5px solid white;
}

.banner:hover > ul {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

@keyframes banner {
  /* 0% {
        left: 0px;
    }
    10% {
        left: -730px
    }
    30% {
        left: -730px
    }
    40% {
        left: -1460px
    }
    60% {
        left: -1460px
    }
    70% {
        left: -2190px
    }
    90% {
        left: -2190px
    }
    90% {
        left: 0px;
    } */
}

.banner > ul li {
  float: left;
}

.banner > ul li img {
  width: 730px;
  height: 454px;
}

#bannerprev,
#bannernext {
  font-size: 50px;
  color: white;
  line-height: 50px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}

#bannerprev:hover,
#bannernext:hover {
  cursor: pointer;
}

#bannerprev {
  left: 5px;
}

#bannernext {
  right: 5px;
}

.pagecontent > .content > .icon {
  position: absolute;
  top: 2px;
  right: 0px;
  /* height: 460px; */
  font-size: 0px;
}

.icon .content {
  width: 250px;
  border: 1px solid rgb(207, 207, 207);
  border-bottom: none;
}

.icon .title {
  padding: 10px;
  line-height: 20px;
}

.icon .title::after {
  content: "";
  display: block;
  clear: both;
}

.icon .content .title a {
  font-size: 12px;
  color: #666;
  vertical-align: middle;
}

.icon hr {
  margin: 0 auto;
  padding: 0;
  width: 96%;
}

.icon .top h3 {
  font-size: 14px;
  margin: 0;
  float: left;
}

.icon .top span {
  float: right;
}

.icon .top ul li {
  margin: 10px;
  font-size: 12px;
  color: rgb(56, 56, 56);
}

table {
  font-size: 12px;
  border: 1px solid rgb(207, 207, 207);
  border-left: none;
  border-right: none;
  border-collapse: collapse;
}

table tr td {
  border: 1px solid rgb(207, 207, 207);
  text-align: center;
  width: 60px;
  height: 60px;
}

table tr td:first-child {
  border-left: none;
}

table tr td:last-child {
  border-right: none;
}

table tr td i {
  display: inline-block;
  width: 60px;
  height: 45px;
  background-image: url(../assets/img/home/icons.png);
  background-repeat: no-repeat;
}

table tr td i.jipiao {
  background-position: -65px 0px;
}

table tr td i.dianyingpiao {
  background-position: -130px 0px;
}

table tr td i.youxi {
  background-position: -191px 0px;
}

table tr td i.caipiao {
  background-position: -3px -70px;
}

table tr td i.jiayouzhan {
  background-position: -65px -70px;
}

table tr td i.jiudian {
  background-position: -130px -70px;
}

table tr td i.huochepiao {
  background-position: -191px -70px;
}

table tr td i.caipiao {
  background-position: -3px -70px;
}

table tr td i.chongchou {
  background-position: -65px -140px;
}

table tr td i.lipingka {
  background-position: -129px -140px;
}

table tr td i.baitiao {
  background-position: -195px -140px;
}

.icon .image {
  width: 250px;
  margin-top: 2px;
  opacity: 0.9;
  position: absolute;
  bottom: 7px;
}

.icon .image:hover {
  opacity: 1;
}

.recommend {
  width: 1200px;
  height: 165px;
  margin: 10px auto;
}

.recommend .title {
  box-sizing: border-box;
  float: left;
  width: 204px;
  height: 163px;
  background-color: #5c5251;
  padding: 30px;
  text-align: center;
}

.recommend .title span {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  color: white;
}

.recommend .img {
  float: left;
}

.recommend .img:hover {
  opacity: 0.8;
}

.tab {
  position: relative;
  width: 1200px;
  margin: 0px auto;
}

.tab .container {
  width: 360px;
  margin: 0px auto;
}

.tab .container .tab1 {
  float: left;
  width: 120px;
  text-align: center;
}

.tab .container .tab1 i {
  display: block;
  width: 32px;
  height: 35px;
  background-image: url(../assets/img/home/bg0.png);
  background-repeat: no-repeat;
  background-position: -3px 0px;
  margin: 0 auto;
}

.tab .container .tab1 .active {
  background-position: -37px 0px;
  color: tomato;
}

.tab .container .tab1:hover i,
.tab .container .tab1:hover span {
  background-position: -37px 0px;
  color: tomato;
}

.tab .container .tab1 span {
  display: block;
  width: 100px;
  margin: 0 auto;
  margin-top: 5px;
}

.tab .container::after {
  content: "";
  display: block;
  clear: both;
}

.tabcontent {
  width: 1200px;
  margin: 0px auto;
}

.tabcontent .procard {
  float: left;
  margin-top: 20px;
  margin-left: 24px;
  width: 270px;
  height: 330px;
  border: 1px solid green;
}

.tabcontent .procard .img {
  width: 230px;
  height: 230px;
  margin: 10px auto;
  text-align: center;
}

.tabcontent .procard img {
  width: 200px;
}

.tabcontent .procard a {
  display: block;
  margin-left: 5px;
  margin-right: 5px;
  color: grey;
  font-size: 12px;
  line-height: 20px;
}

.tabcontent .procard a:hover {
  color: tomato;
}

.tabcontent .procard .price {
  font-size: 20px;
  color: #e1251b;
  height: 35px;
  padding-left: 10px;
  display: block;
  line-height: 24px;
  margin: 10px auto 0;
}

.tabcontent::after {
  content: "";
  display: block;
  clear: both;
}

section.like {
  width: 1200px;
  margin: 20px auto;
}

section.like > .title {
  margin-bottom: 10px;
  line-height: 20px;
}

section.like > .title > h2 {
  float: left;
  color: #e1251b;
  font-size: 20px;
  margin: 0;
}

section.like > .title > i {
  float: right;
  background-image: url(../assets/img/home/icons.png);
  width: 66px;
  height: 25px;
  background-position: 182px -104px;
}

section.like > .title > span {
  background-image: url(../assets/img/home/icons.png);
  width: 66px;
  height: 25px;
  background-position: 182px -104px;
  vertical-align: middle;
  line-height: 25px;
  margin-right: 5px;
  float: right;
  right: 0px;
}

section.like > .title > span > a {
  color: #333;
}

section.like > .title > span > a:hover {
  color: #e1251b;
}

section.like > .title::after {
  content: "";
  display: block;
  clear: both;
}

section.like > .content {
  width: 100%;
  border: 1px solid #999;
}

/* 给最后一个加上一个抗浮动 不让content高度压塌 */

section.like > .content::after {
  content: "";
  clear: both;
  display: block;
}

section.like > .content > .prodcutcard {
  position: relative;
  width: 200px;
  box-sizing: border-box;
  text-align: center;
  float: left;
}

section.like > .content > .prodcutcard > img {
  transition: all 400ms;
  margin-top: 6.5px;
  margin-bottom: 2px;
}

section.like > .content > .prodcutcard > img:hover {
  opacity: 0.9;
  transform: scale(1.1);
}

section.like > .content > .prodcutcard:last-of-type > .text {
  border: none;
}

section.like > .content > .prodcutcard > .text {
  text-align: start;
  border-right: 1px solid #999;
  margin-left: 30px;
  padding-right: 10px;
}

section.like > .content > .prodcutcard > .text > .price {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  color: red;
  font-weight: bold;
}

section.aee {
  width: 1200px;
  margin: 20px auto;
}

section.aee > .title > h2 {
  color: red;
  font-size: 20px;
  float: left;
}

section.aee > .title > ul {
  float: right;
  margin: 0;
  padding: 0;
}

section.aee > .title > ul > li {
  float: left;
  margin: 0;
  padding: 0;
  height: 23px;
  line-height: 23px;
}

section.aee > .title > ul > li > a {
  color: #999;
  padding: 0 5px;
  border-right: 1px solid #999;
}

section.aee > .title > ul > li > a.active {
  color: #e1251b;
}

section.aee > .title > ul > li > a:hover {
  color: tomato;
}

section.aee > .title > ul > li:last-of-type > a {
  border-right: none;
}

section.aee > .title > h2 {
  margin: 0px;
}

section.aee > .title::after {
  content: "";
  display: block;
  clear: both;
}

/* title 结束 */

/* content开始 */

section.aee > .content {
  margin-top: 10px;
  font-size: 0px;
  border-top: 2px solid red;
}

section.aee > .content::after {
  content: "";
  display: block;
  clear: both;
}

section.aee > .content > div.float {
  height: 360px;
  float: left;
}

section.aee > .content > div[class*="content"] {
  background-color: rgb(185, 185, 185);
}

section.aee > .content > .content1 {
  background-color: white !important;
  width: 210px;
}

section.aee > .content > .content2 {
  position: relative;
  width: 330px;
  height: 360px;
  background-color: burlywood;
  overflow: hidden;
}

section.aee > .content > .content3 {
  width: 220px;
}

section.aee > .content > .content4 {
  width: 220px;
  padding-right: 1px;
}

section.aee > .content > .content5 {
  width: 210px;
}

section.aee > .content > .content1 > .top > ul {
  font-size: 12px;
  margin: 0;
  padding: 0;
  width: 210px;
  margin-top: 10px;
}

section.aee > .content > .content1 > .top > ul > li {
  width: 40%;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin: 0px 10px;
  float: left;
  border-bottom: 1px solid rgb(209, 209, 209);
}

section.aee > .content > .content1 > .top > ul > li > a {
  color: #333;
}

section.aee > .content > .content1 > .top > ul > li > a:hover {
  color: tomato;
}

section.aee > .content > .content1 > img {
  margin-top: 10px;
  width: 210px;
}

section.aee > .content > .content2 > ul {
  position: absolute;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 990px;
  height: 360px;
  animation-name: aeebanner;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

section.aee > .content > .content2 > ul:hover {
  animation-play-state: paused;
}

@keyframes aeebanner {
  0% {
    left: 0px;
  }
  20% {
    left: -330px;
  }
  40% {
    left: -330px;
  }
  50% {
    left: -660px;
  }
  70% {
    left: -660px;
  }
  90% {
    left: 0px;
  }
}

section.aee > .content > .content2::before,
section.aee > .content > .content2::after {
  position: absolute;
  color: rgb(126, 126, 226);
  font-size: 30px;
  line-height: 30px;
  margin-top: -15px;
  top: 50%;
}

/* section.aee > .content > .content2::before {
  z-index: 2;
  content: "<";
  left: 5px;
}

section.aee > .content > .content2::after {
  right: 5px;
  content: ">";
} */

section.aee > .content > .content2 > ul > li {
  float: left;
  width: 330px;
}

section.aee > .content > .content2 > ul > li > img {
  width: 330px;
}

section.aee > .content > .content3 > img {
  width: 219.4px;
}

section.aee > .content > .content3 > img:first-child {
  margin-bottom: 1px;
}

section.aee > .content > .content5 > img:first-child {
  margin-bottom: 1px;
}

aside {
  margin: 10px auto;
  width: 1200px;
  height: 67px;
  line-height: 67px;
  background-color: #f7f7f7;
  text-align: center;
}

aside > ul {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

aside > ul > li {
  box-sizing: border-box;
  border-right: 1px dotted #ccc;
  float: left;
  width: 120px;
  height: 37px;
}

aside > ul > li:last-of-type {
  border: none;
}

footer {
  width: 100%;
  min-width: 1200px;
  background-color: rgb(233, 233, 233);
}

footer > .top {
  box-sizing: border-box;
  width: 1200px;
  margin: 0 auto;
  padding: 10px 30px;
  border-bottom: 1px solid rgb(220, 220, 220);
}

footer > .top > dl {
  float: left;
  width: 190px;
}

footer > .top::after {
  content: "";
  display: block;
  clear: both;
}

footer > .top > dl > dt {
  font-weight: bold;
  font-size: 14px;
}

footer > .top > dl > dt ~ dd {
  margin: 0;
  padding: 0;
  margin-top: 5px;
}

footer > .top > dl > dt ~ dd > a {
  color: #333;
}

footer > .top > dl:last-of-type a {
  color: transparent;
}

footer > .top > dl:last-of-type img {
  width: 121px;
}

footer > .bottom {
  width: 1200px;
  margin: 0px auto;
  margin-top: 10px;
  text-align: center;
}

footer > .bottom > ul {
  width: 650px;
  margin: 0px auto;
}

footer > .bottom > ul::after {
  content: "";
  display: block;
  clear: both;
}

footer > .bottom > ul > li {
  box-sizing: border-box;
  float: left;
  width: 65px;
  border-right: 1px solid #999;
}

footer > .bottom > ul > li > a {
  color: #333;
}

footer > .bottom > ul > li > a:hover {
  color: tomato;
}

footer > .bottom > .copyright {
  color: #333;
  margin-top: 10px;
  height: 24px;
  line-height: 24px;
  height: 50px;
  padding-bottom: 50px;
}

.sidebar {
  z-index: 10;
  position: fixed;
  right: 0px;
  width: 5px;
  height: 100%;
  background-color: #666;
  animation-duration: 1.5s;
}

.sidebarclose {
  animation-name: sidebarclose;
  right: 0px;
}

.sidebaropen {
  animation-name: sidebaropen;
  right: 300px;
}

.sidebar::before {
  content: "";
  position: absolute;
  left: 5px;
  width: 300px;
  height: 100%;
  background-color: bisque;
}

.sidebar > .top {
  background-image: url(../assets/img/list.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: -30px;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background-color: #666;
}

.sidebar > .colse {
  background-image: url(../assets/img/cross.png);
}

.sidebar > .bottom {
  background-image: url(../assets/img/toolbars.png);
  background-repeat: no-repeat;
  background-position: -50px -250px;
  position: absolute;
  left: -30px;
  bottom: 0px;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background-color: #666;
}

.sidebar > .middle {
  position: absolute;
  left: -30px;
  top: 50%;
  margin-top: -120px;
  width: 35px;
  height: 240px;
}

.sidebar > .middle div {
  color: white;
  background-color: rgb(122, 110, 110);
  background-image: url(../assets/img/toolbars.png);
  border-radius: 5px;
  width: 35px;
  height: 35px;
  margin-top: 3px;
  background-color: #666;
}

.sidebar > .middle div.icon1 {
  background-position: -88px -175px;
}

.sidebar > .middle div.icon:hover::after,
.sidebar > .bottom:hover::after {
  left: -60px;
}

.sidebar > .middle div.icon:hover,
.sidebar > .middle div.icon:hover::after,
.sidebar > .bottom:hover,
.sidebar > .bottom:hover::after {
  background-color: #e1251b;
}

.sidebar > .middle div.icon::after,
.sidebar > .bottom::after {
  color: white;
  text-align: center;
  border-radius: 5px;
  position: absolute;
  background-color: #666;
  z-index: -10;
  display: block;
  width: 70px;
  left: 0px;
  height: 35px;
  line-height: 35px;
  /* 使用动画效果 当：hover时 left改变的时候使用动画效果 持续时间为.5秒 */
  transition: left 0.5s;
}

.sidebar > .middle div.icon1::after {
  content: "商品会员";
}

.sidebar > .middle div.icon2::after {
  content: "购物车";
}

.sidebar > .middle div.icon3::after {
  content: "我的关注";
}

.sidebar > .middle div.icon4::after {
  content: "我的足迹";
}

.sidebar > .middle div.icon5::after {
  content: "我的消息";
}

.sidebar > .middle div.icon6::after {
  content: "消息";
}

.sidebar > .bottom::after {
  content: "回到顶部";
}

.sidebar > .middle div.icon2 {
  background-position: -50px 0px;
}

.sidebar > .middle div.icon3 {
  background-position: -50px -50px;
}

.sidebar > .middle div.icon4 {
  background-position: -50px -100px;
}

.sidebar > .middle div.icon5 {
  background-position: -190px -150px;
}

.sidebar > .middle div.icon6 {
  background-position: -50px -150px;
}

/* 
sidebaropen为动画名
动画效果从right：0到right：300p'x
 */

@keyframes sidebaropen {
  from {
    right: 0;
  }
  to {
    right: 300px;
  }
}

/* 
sidebarclose为动画名
动画效果从right：0到right：300p'x
 */

@keyframes sidebarclose {
  from {
    right: 300px;
  }
  to {
    right: 0px;
  }
}
